<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<dom-module id="transfer-ownership">
<template>
    <style include="shared-styles dialogs">
        :host {
            width: 100%;
        }
        paper-dialog {
            width: 310px;
        }
        paper-dialog ::slotted(h2) {
            text-transform: capitalize;
        }
        p.margin {
            margin: 16px 0 !important; 
        }
        ul {
            padding-left: 18px;
            color: rgba(0,0,0,0.54);
            font-size: 16px;
            margin-bottom: 0;
        }
        .btn-group {
            margin-bottom: 24px;
        }
        .progress {
            margin: 32px 0 8px 0;
            width: 100%;
        }

        paper-progress {
            width: 100%;
            margin-left: -24px;
            margin-right: -24px;
        }

        paper-progress#progresserror ::slotted(#primaryProgress) {
            background-color: var(--red-color);
        }

        .errormsg-container {
            color: var(--red-color);
        }

        .errormsg-container iron-icon {
            color: inherit;
            vertical-align: bottom;
            margin-right: 8px;
        }
    </style>

    <paper-dialog id="dialogModal" with-backdrop>
        <h2>Transfer Ownership</h2>
        <paper-dialog-scrollable>
            <p>
                Choose a user to transfer ownership to for [[type]][[_plural(items)]]
            </p>
            <ul>
                <template is="dom-repeat" items="[[items]]">
                    <li>[[_displayName(item,type)]]</li>
                </template>
            </ul>
            <template is="dom-if" if="[[!members.length]]" restamp>
                <p class="margin">No users found. <a href="/teams" class="blue-link" dialog-dismiss>Add users in teams. </a></p>
            </template>
            <template is="dom-if" if="[[members.length]]" restamp>
                <paper-dropdown-menu label="Users">
                     <paper-listbox slot="dropdown-content" attr-for-selected="value" selected="{{newOwner}}" class="dropdown-content" verticalAlign="top">
                        <template id="membersDomRepeat" is="dom-repeat" items="[[members]]" as="member">
                            <paper-item value="[[member.id]]">[[_displayUser(member)]]</paper-item>
                        </template>
                     </paper-listbox>
                </paper-dropdown-menu>
            </template>
        </paper-dialog-scrollable>
        <div class="progress">
            <paper-progress id="progress" indeterminate hidden$="[[!sendingData]]"></paper-progress>
            <paper-progress id="progresserror" value="100" hidden$="[[!formError]]"></paper-progress>
            <p class="errormsg-container" hidden$="[[!formError]]">
                <iron-icon icon="icons:error-outline"></iron-icon>
                <span id="errormsg"></span>
            </p>
        </div>
        <div class="clearfix btn-group">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button class="red" disabled$="[[!newOwner]]" on-tap="confirmTransfer">Transfer Ownership</paper-button>
        </div>
    </paper-dialog>
</template>

<script>
    Polymer({
        is: 'transfer-ownership',

        properties: {
            type: {
                type: String
            },
            members: {
                type: Array
            },
            newOwner: {
                type: String,
                value: false
            },
            items: {
                type: Array
            },
            sendingData: {
                type: Boolean,
                value: false
            },
            formError: {
                type: Boolean,
                value: false
            }
        },
        listeners: {
            'iron-overlay-closed': 'overlayClosed',
            'confirmation': 'confirmationListener'
        },
        ready: function() {

        },
        _displayName: function(item, type) {
            return type != 'zone' ? item.name : item.domain;
        },
        _computeType: function(type, value) {
            return type == value;
        },
        _openDialog: function(e) {
            this.$.dialogModal.open();
        },
        _closeDialog: function(e) {
            this.$.dialogModal.close();
            this.set('sendingData', false)
        },
        overlayClosed: function (e) {
            // console.log('iron-overlay-closed', e);
            e.stopPropagation();
        },
        confirmTransfer: function (e) {
            // console.log('confirmation', e);
            e.stopPropagation();
            this.dispatchEvent(new CustomEvent('transfer-ownership', { bubbles: true, composed: true, detail: {user_id: this.newOwner} }));

            this.set('sendingData', true)
        },
        _displayUser: function (member){
            return member && member.name || member.email || member.username;
        },
        _plural: function (arr) {
            return arr.length && arr.length>1 ? 's' : '';
        }
    })
</script>
</dom-module>
